<template>
  <div >
  <div style=" background-color: #333;height: 410px;">
    <div style="width: 85%;margin: auto;">
  <!--中心-->
  <el-container>
    <el-header>
      <div><span class="fangxiang">{{fangxiang}}{{kecheng.courseName}}</span></div>
    </el-header>
    <el-container>

      <el-aside width="600px">
        <div>
          <img :src="kecheng.courseImage" style="width: 600px;height: 322.8px;">
        </div>
      </el-aside>

      <el-main>
        <div>
          <span class="righttitle">{{kecheng.courseName}}</span><br/><br/>
          <span class="rightjiage">价格：</span><span class="rightprice">{{kecheng.coursePrice}}</span><br/><br/><br/>
          <span class="rightsvip">SVIP : </span><span class="svipprice">{{kecheng.courseVprice}}</span>
          <!--可以加if判断如果登陆等账号拥有会员那么开通会员不会显示-->
          <span class="openvip">开通会员 ></span>
          <div class="xiahuaxian"></div>
          <span class="teacherright">讲师 : </span><span class="teachername">{{teacherinfo.tname}}</span><br/><br/><br/>
        </div>
        <div class="buttomandCollection">
          <el-button type="danger" round @click="purchase" v-if="this.denglu==0">立即购买</el-button>
          <el-button type="danger" round @click="purchase" v-if="this.denglu==1" :disabled="this.denglu==1">已购买</el-button>
        </div>
        <div class="collection">
          <a @click="changeshouchang()"  style="color: #666;text-decoration: none;" v-if="shouchang==true"><i class="el-icon-star-off"></i>
            <span>收藏</span></a>
          <a @click="changeshouchang()"  style="color: red;text-decoration: none;" v-else><i class="el-icon-star-off"></i>
            <span>已收藏</span></a>
        </div>

      </el-main>
    </el-container>
  </el-container>


  </div>
  </div>

  <div class="typecard">
    <div class="type">
      <span style="line-height: 66px;margin-left: 20px;font-weight: bold;" @click="changezhanshi()">课程介绍</span>
      <span style="line-height: 66px;margin-left: 30px;font-weight: bold;" @click="changezhanshitwo()">录播课程</span>
    </div>

    <!--讲师简介-->
    <div class="jsjj">
      <div style="margin:10px">
        <span>讲师简介</span>
        <div style="border: 0.5px solid lightgrey;margin-top: 20px"></div>
      </div>
      <div class="jiangshiimg">
        <img :src="teacherinfo.timage" style="width: 50px;height: 50px;border-radius: 50px" @click="tiaozhuan">
      </div>
      <span style="margin-top: 10px;float: left;margin-left: 10px;font-weight: bold;">{{teacherinfo.tname}}</span>
      <span style="margin-top: 7px;float: right;margin-right: 10px;" v-if="teachercollection==true" @click="teachershoucang()"><i class="el-icon-star-off" ></i>关注</span>
      <span style="margin-top: 7px;float: right;margin-right: 10px;" v-else @click="teachershoucang()"><i class="el-icon-star-off"></i>已关注</span>
      <br/><br/>
      <span style="margin-left: 10px;font-size: 14px">{{teacherinfo.tjianjie}}</span>
    </div>

    <!--课程介绍的内容-->
    <div class="neirong" v-if="zhanshi==true" v-html="neirong"><br/><br/>
      <img src="" style="width: 950px"/>
    </div>

    <!--录播课程的内容-->
    <div class="neirong"  v-if="zhanshi==false">
      <span style="font-weight: bold;font-size: 18px">课程大纲</span>
      <div v-for="kcsp in kechengshipin">
        <span>{{kcsp.kname}}</span>
        <ul v-for="sss in kcsp.sectionList" style="font-size: 14px;list-style: none;line-height: 40px;color: #999;" @click="guankan(sss.vid)">
          <li>
            <i class="el-icon-video-play"></i>
            {{sss.jname}}
            <el-button disabled v-if="sss.isdownload==1" style="float: right">下载课件</el-button>
            <span style="float: right;color: #999;margin-right: 30px;" v-if="sss.isdownload==1">{{sss.videoTime}}</span>
            <span style="float: right;color: #999;margin-right: 125px;" v-else>{{sss.videoTime}}</span>
            <span v-if="sss.isfree==1" class="listmianfei">免费</span>

          </li>
        </ul>
      </div>
    </div>




  </div>
 </div>



</template>

<script>
  import axios from 'axios'
    export default {
        name: "curriculumcenter"
      ,
      data(){
          return{
            denglu:'',
            tname:'',
            coursePrice:'',
            courseVprice:'',
            vip:'',
            tshare:'',
            tid:'',
            kid:'',
            uid:'',
            zhanshi:true,
            fangxiang:"首页 >  录播中心  >  ",
            // title:"基于Flink+Hudi构建企业亿级云上实时数据湖教程（PC、移动、小程序）",
            // price:"￥599.00",

            kecheng:[],
            teacherinfo:[],
            shouchang:true,
            neirong:[],
            kechengshipin:[],
            teachercollection:false
          }
      },
      methods:{
        guankan(obj){
          if(obj!=null){
            alert(JSON.stringify(this.kecheng.courseisfire))
            if(this.kecheng.courseisfire==0){
              alert("这是免费的课程")
            }else {
              alert("这是svip免费的")
            }
          }else{
            this.$message.error("下面没有视频了哦")
          }
        },
          //立即购买
        purchase(){
        this.$axios.get("teacher-front/demo/teacher/queryByTid?tid="+this.tid).then(r=>{
          //alert(JSON.stringify(r.data.obj.tshare))
          let tshare = r.data.obj.tshare;
         // alert(this.vip)
          if(this.vip==1){
            let sr=(this.courseVprice)*tshare/100
            this.$axios.get("teacher-front/demo/course-order/insetorder?uid="+this.uid+"&kid="+this.kid+"&actualAmount="+this.courseVprice+"&teacherincome="+sr).then(r=>{
                if(r.data>0){
                  window.location.href="http://localhost:8899/course-details/payment/pay?actualAmount="+this.courseVprice+"&oid="+r.data+"&tname="+this.tname;
                }
            })
          }else{
            let sr=(this.coursePrice)*tshare/100
            this.$axios.get("teacher-front/demo/course-order/insetorder?uid="+this.uid+"&kid="+this.kid+"&actualAmount="+this.coursePrice+"&teacherincome="+sr).then(r=>{
              window.location.href="http://localhost:8899/course-details/payment/pay?actualAmount="+this.courseVprice+"&oid="+r.data+"&tname="+this.tname;
            })
          }
        });


          // this.$axios.get("http://localhost:8899/course-details/payment/pay").then(r=>{
          //
          // })
        },
        tiaozhuan(){
          this.$router.push({
            path: '/teachercenter',
            query: {
              tid: this.tid
            }
          })
        },
        changeshouchang(){
          if (this.shouchang==false) {
            this.$message('已收藏该课程！');
          }else {
            //如果该课程没有收藏的话，那么我们就根据当前uid 去课程收藏表里去收藏该课程
            axios.post("course-details/demo/course-collection/addcollection/"+this.uid+"/"+this.kid).then(r=>{
                if (r.data.obj==true){
                  this.$message('课程收藏成功!!');
                  this.shouchang=false
                }else {
                  this.$message('课程收藏失败！！');
                }

            })
          }
        },
        changezhanshi(){
          this.zhanshi=true;
        },
        changezhanshitwo(){
          this.zhanshi=false;
        },
        teachershoucang(){
          if (this.teachercollection==true) {

            //如果没有关注那么我们就让他关注并且在讲师关注表里添加
            this.$axios.post("course-details/demo/teacher-collection/addtcollection/"+this.uid+"/"+this.kid).then(r=>{
              if (r.data.obj == true) {
                this.$message('讲师关注成功！！');
                this.teachercollection=false;
              }else {
                this.$message('讲师关注失败！！');
              }
            })
          }else {
            this.$message('讲师已关注');
          }
        }

      }
      ,mounted(){
          let item1 = sessionStorage.getItem("isvip");
          this.vip=item1;
          this.kid=1;
          this.uid=1;
         // alert(JSON.parse(sessionStorage.getItem("uid")));
          //this.uid=JSON.parse(sessionStorage.getItem("userInfo"));
        //这里的session不同于服务器中的session，这里sessionStorage是用于临时保存同一窗口(或标签页)的数据
        // ，在关闭窗口或标签页之后将会删除这些数据，需要先在js中setItem才能通过getItem拿到值
         // alert(this.uid)
        this.$axios.get("course-details/demo/course/findByKid/"+this.kid).then(r=>{
          alert(JSON.stringify(r.data.obj));
          this.kecheng=r.data.obj[0];
          this.kechengshipin=r.data.obj[0].chapterList;
          this.neirong=r.data.obj[0].courseJieshao.cjieshao;
          this.teacherinfo=r.data.obj[0].teacher;
          this.tid=r.data.obj[0].teacher.tid;
          this.courseVprice=r.data.obj[0].courseVprice;
          this.coursePrice=r.data.obj[0].coursePrice;
          this.tname=r.data.obj[0].teacher.tname;
        });
        //根据uid去查课程是否收藏
        //alert(item)
        this.$axios.post("course-details/demo/course-collection/iscollection/"+this.uid+"/"+this.kid).then(r=>{
            if (r.data.obj == 0 || r.data.obj == "") {
              this.shouchang=true;
            }else {
              this.shouchang=false;
            }

        });

        //根据uid去查询是否关注讲师
        this.$axios.post("course-details/demo/teacher-collection/istcollection/"+this.uid+"/"+this.kid).then(r=>{
            if (r.data.obj == 0 || r.data.obj == "") {
              this.teachercollection=true;
            }else {
              this.teachercollection=false;
            }
        });

        this.$axios.get("teacher-front/demo/course-order/querbyUIdandTid?uid="+this.uid+"&kid="+this.kid).then(r=>{
          if(r.data==1){
            this.denglu=r.data;
          }else{
            this.denglu=0;
          }
        })


      }
    }
</script>

<style scoped>
  body{
    background-color: lightgrey;
  }
  .jiangshiimg{
    /*style="float: left;width: 50px;height: 50px;border-radius:50px;background-color: red;margin-left: 10px; "*/
    float: left;
    width: 50px;
    height:50px;
    border-radius: 50px;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 14px;
  }
  .jsjj{
    width: 20%;
    float: right;
    border-radius: 10px;
    background-color: ghostwhite;
  }
  .listmianfei{
    float: right;
    margin-right: 30px;
    color: #107ec4;
  }
  .wuxulist{
    list-style: none;
    padding-left: 0px ;
    margin: 20px;
  }
  .neirong{
    margin-top: 20px;
    width: 75%;
    background: ghostwhite;
    padding: 20px;
    border-radius: 10px;
    letter-spacing: 2px;
    font-size: 14px;
    float: left;
  }
  .type{
    width: 78%;
    height:66px;
    background: ghostwhite;
    border-radius: 10px;
    float: left;
  }
  .typecard{
    width: 85%;
    margin: auto;
    margin-top: 40px;
  }

  .el-header, .el-footer {
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 60px;
    margin-left: 0px;
    padding-left: 0px;
  }

  .el-aside {
    background-color: #333;
    color: #333;
    text-align: center;

  }

  .el-main {
    background-color: #333;
    color: white;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-left:  30px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .fangxiang{
    float: left;
  }
  .righttitle{
    float: left;
    font-size: 20px;
  }
  .rightjiage{
    float: left;
    margin-top: 30px;
    color: #666;
  }
  .rightprice{
    float: left;
    margin-top: 18px;
    color: red;
    font-size: 28px;
  }
  .rightsvip{
    float: left;
    margin-top: 20px;
    color: #666;
  }
.svipprice{
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  color: red;
}
  .openvip{
    float: left;
    margin-top: 20px;
    margin-left: 10px;
    color: dodgerblue;
  }
  .xiahuaxian{
    border: 1px solid gray;
    margin-top: 60px;
  }
  .teacherright{
    float: left;
    margin-top: 20px;
    color: #666;
  }
  .teachername{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    color: #666;
  }
  .buttomandCollection{
    float: left;
    bottom: 10px;
    margin-top: 32px;
  }
  .collection{
    float: right;
    bottom: 10px;
    margin-top: 48px;
  }
  .collection > a:hover{
    color: #ff0000;

  }


</style>
